<template>
    <div>
        <div class="search">
            <div class="search-up">
                <el-button @click="addDialog=true" style="border: 1px solid #0846B9;color:#0846B9">+新增</el-button>
            </div>
            <div class="search-down">
                <span>部门名称:</span>
                <el-input class="search-input" v-model="searchKeyword" clearable size="mini"></el-input>
                <div class="search-down-btn">
                    <el-button size="small" @click="search" style="color:white;background-color: #0846B9">搜索</el-button>
                    <el-button size="small" @click="resetsearch" style="border: 1px solid #0846B9;color:#0846B9">重置</el-button>
                </div>
            </div>
        </div>
        <div class="wrapper">
            <!-- 表格 -->
            <el-table :data="departmentList.slice((pageIndex-1)*pageSize,pageIndex*pageSize)" style="width: 100%" v-loading="loading">
                <el-table-column type="index" label="序号" width="65px" align="center"></el-table-column>
                <el-table-column prop="dept_name" label="部门名称" align="center"></el-table-column>
                <el-table-column prop="dept_code" label="部门编号" align="center"></el-table-column>
                <el-table-column prop="dept_duty" label="部门安全职责" align="center"></el-table-column>
                <el-table-column prop="note" label="备注" align="center"></el-table-column>
                <el-table-column label="操作" width="200px" align="center">
                    <template slot-scope="scope">
                        <!-- 编辑本行数据，点击弹出编辑用户的对话框 -->
                        <el-button type="text"
                            @click="updateDialogBtn(scope.row.dept_id,scope.row.dept_name,scope.row.dept_code,scope.row.dept_duty,scope.row.note)">
                            编辑
                        </el-button>
                        <!-- 删除本行数据 -->
                        <el-button type="text" @click="deleteDialog(scope.row.dept_id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="page">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="departmentInfo.pageIndex"
                    :page-sizes="[1, 2, 5, 10]"
                    :page-size="departmentInfo.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalRecords">
                </el-pagination>
            </div>
        </div>

        <!-- 新增部门的对话框 -->
        <el-dialog
            title="部门信息新增"
            :visible.sync="addDialog"
            width="50%"
            append-to-body>
            <el-form :model="addDepartmentForm" :rules="DepartmentFormRules"
                ref="addDepartmentFormRef" label-width="150px">
                <el-form-item label="部门名称：" prop="dept_name">
                    <el-input v-model="addDepartmentForm.dept_name"></el-input>
                </el-form-item>
                <el-form-item label="部门编号：" prop="dept_code">
                    <el-input v-model="addDepartmentForm.dept_code"></el-input>
                </el-form-item>
                <el-form-item label="部门安全职责：" prop="dept_duty">
                    <el-input v-model="addDepartmentForm.dept_duty" type="textarea"></el-input>
                </el-form-item>
                <el-form-item label="备注：" prop="note">
                    <el-input v-model="addDepartmentForm.note" type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <!-- 确认取消事件 -->
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addDepartment">提交</el-button>
                <el-button @click="addDialog = false">取消</el-button>
            </span>
        </el-dialog>

        <!-- 编辑部门的对话框 -->
        <el-dialog
            title="部门信息编辑"
            :visible.sync="updateDialog"
            width="50%"
            append-to-body>
            <el-form :model="updateDepartmentForm" :rules="DepartmentFormRules"
                ref="updateDepartmentFormRef" label-width="150px">
                <el-form-item label="部门名称：" prop="dept_name">
                    <el-input v-model="updateDepartmentForm.dept_name"></el-input>
                </el-form-item>
                <el-form-item label="部门编号：" prop="dept_code">
                    <el-input v-model="updateDepartmentForm.dept_code"></el-input>
                </el-form-item>
                <el-form-item label="部门安全职责：" prop="dept_duty">
                    <el-input v-model="updateDepartmentForm.dept_duty" type="textarea"></el-input>
                </el-form-item>
                <el-form-item label="备注：" prop="note">
                    <el-input v-model="updateDepartmentForm.note" type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <!-- 确认取消事件 -->
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="updateDepartment">提交</el-button>
                <el-button @click="updateDialog = false">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { request } from '../../../../api/axios'
export default {
    name:"Department",
    props:{
        // 从Organization组件接收到的本行的organization_id
        f_organization_id:String
    },
    data(){
        return{
            // 获取部门列表的参数
            departmentInfo:{
                ilist: [
                    {
                    title: "organization_id",
                    content: this.f_organization_id
                    }
                ]
            },
            // 分页
            pageIndex: 1,   //第几页
            pageSize: 10,   //一页几条
            // 获取到的部门列表数据
            departmentList:[],
            totalRecords:0,
            locallist:"",   //搜索事件时数据暂存至locallist中
            loading:true,

            // 搜索框输入的关键词
            searchKeyword:"",
            // 搜索结果
            searchResult:[],
            searchResultRecords:0,

            // 添加对话框的显示与隐藏
            addDialog:false,
            // 添加部门的参数
            addDepartmentForm:{
                dept_name: "",
                organization_id:"",
                dept_code: "",
                dept_duty: "",
                note: ""
            },

            // 编辑对话框的显示与隐藏
            updateDialog:false,
            // 编辑部门的参数
            updateDepartmentForm:{
                dept_id:"",
                dept_name: "",
                organization_id:"",
                dept_code: "",
                dept_duty: "",
                note: ""
            },

            // 要删除信息的id
            deletedepartment:{
                dept_id:""
            },

            // 表单验证规则
            // 新增和编辑表单的规则 
            DepartmentFormRules:{
                dept_name:[
                    {required:true,message:"请输入部门名称",trigger:"blur"},
                    {min:1,max:20,message:"长度在 1 到 20 个字符",trigger:"blur"}
                ],
            }
        }
    },
    created(){
        this.getDepartmentList();
    },
    watch:{
        f_organization_id:{
            handler:function(params) {
                this.$nextTick(function() {
                    console.log(this.f_organization_id)
                    this.departmentInfo.ilist[0].content=this.f_organization_id
                    this.getDepartmentList()
                    this.loading=true
                })
            }
        }
    },
    methods:{
        // 获取部门列表
        async getDepartmentList(){
            await request("post","/Department/GetStatus",this.departmentInfo)
            .then(res =>{
                console.log(res)
                this.departmentList=res.resultList
                this.totalRecords=res.totalRecords
                this.locallist=res.resultList
                this.loading=false
            })
        },

        // 搜索事件
        search(){
            this.departmentList=this.locallist
            this.searchResult=[]
            console.log(this.searchKeyword)
            for(let i=0;i<this.departmentList.length;i++){
                if(this.departmentList[i].dept_name.indexOf(this.searchKeyword) >-1){
                    this.searchResult.push(this.departmentList[i])
                    this.searchResultRecords+=1
                }
            }
            this.departmentList=this.searchResult
            this.totalRecords=this.searchResultRecords
        },
        // 重置搜索框
        resetsearch(){
            this.searchKeyword=""
            this.getDepartmentList()
        },

        // 新增对话框
        addDepartment(){
            this.addDepartmentForm.organization_id=this.f_organization_id
            this.$refs.addDepartmentFormRef.validate(valid =>{
                if(!valid) return
                request("post","/Department/InsertStatus",this.addDepartmentForm)
                .then(res =>{
                    console.log(res)
                    this.addDialog=false
                    this.getDepartmentList()
                    // 提示
                    if(res.result==1){
                        this.$message({
                            type: 'success',
                            message: res.resultDesc,
                        });
                    }
                    else{
                        this.$message({
                            type: 'warning',
                            message: res.resultDesc,
                        });
                    }
                }).catch(err=>{
                    console.log(err)
                })
            })
        },

        // 编辑事件对话框
        updateDialogBtn(id,name,code,duty,note){
            this.updateDialog=true
            console.log(id)
            this.updateDepartmentForm.dept_id=id
            this.updateDepartmentForm.dept_name=name
            this.updateDepartmentForm.dept_code=code
            this.updateDepartmentForm.dept_duty=duty
            this.updateDepartmentForm.note=note
        },
        // 点击提交编辑
        updateDepartment(){
            this.updateDepartmentForm.organization_id=this.f_organization_id
            this.$refs.updateDepartmentFormRef.validate(valid =>{
                if(!valid) return
                request("post","/Department/UpdateInfo",this.updateDepartmentForm)
                .then(res =>{
                    console.log(res)
                    this.updateDialog=false
                    this.getDepartmentList()
                    // 提示
                    if(res.result==1){
                        this.$message({
                            type: 'success',
                            message: res.resultDesc,
                        });
                    }
                    else{
                        this.$message({
                            type: 'warning',
                            message: res.resultDesc,
                        });
                    }
                })
            })
        },

        deleteDialog(id){
            this.$confirm('您确定要删除该数据吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.deletedepartment.dept_id=id
                // 点击确定执行删除事件
                this.deleteDepartment()
            }).catch(() => {});
        },
        // 删除本行数据事件
        deleteDepartment(){
            request("post","/Department/DeleteInfo",this.deletedepartment)
            .then(res=>{
                this.getDepartmentList()
                // 提示
                if(res.result==1){
                    this.$message({
                        type: 'success',
                        message: res.resultDesc,
                    });
                }
                else{
                    this.$message({
                        type: 'warning',
                        message: res.resultDesc,
                    });
                }
            })
            .catch(err =>{
                console.log(err)
            })
        },

        // 分页的设置
        // 一页几条
        handleSizeChange(newSize){
            console.log(newSize)
            this.pageSize=newSize
        },
        // 点击设置第几页
        handleCurrentChange(newPage){
            console.log(newPage)
            this.pageIndex=newPage
        }
    }
}
</script>

<style scoped>
.wrapper{
    padding: 20px 30px;
    background-color: white;
}

/* 对话框 */
.el-form{
    padding-right:30px;
}
.el-form .el-form-item .el-input,.el-select{
    width: 100%;
}

/* 分页 */
.page{
    text-align: center;
    background-color: white;
}
.el-pagination{
    padding-top: 20px;
}

/* 搜索布局开始 */
.search{
    width: 100%;
}
.search .el-button{
    color: #0846B9;
}
.search .search-up{
    text-align: right;
}
.search-down{
    background-color: white;
    margin-top: 10px;
    padding: 0px 130px;
    text-align: left;
}
.search-input{
    width: 400px;
}
.search-down-btn{
    margin: 20px 0px 0px 400px;
    width: 130px;
}

/* 表格操作列的链接的下划线设置 */
.el-table .el-button{
    /* text-decoration: underline; */
    color: #606266;
    padding-bottom: 1px;
    border-bottom: 1px solid;
    border-radius: 0px;
}
</style>